<template>
	<div class="bg-white">
		<div class="flex flex-col h-full p-4">
			<div class="flex">
				<div class="w-60">
					<t-input
					placeholder="请输入项目名称"
					v-model="projectName"
					></t-input>
				</div>
				<t-button class="ml-4" @click="getProjectName">筛选</t-button>
			</div>
			<div class="mt-4 flex justify-between items-center">
				<div>
					<p class="text-base">项目进度表</p>
					<p class="text-gray-400 text-xs" v-show="yearMonthChecked">{{weekArr[0]}} 至 {{weekArr[weekArr.length - 1]}}</p>
				</div>
				<div class="flex items-center">
					<div>
						<t-checkbox label="隐藏未开始项目" :onChange="hiddenStartProject" v-model="hiddenStartProjectValue"></t-checkbox>
					</div>
					<div class="ml-4">
						<t-checkbox label="隐藏已结束项目" :onChange="hiddenEndProject" v-model="hiddenEndProjectValue"></t-checkbox>
					</div>
					<t-button class="ml-4" theme="default" @click="lastBtn"><</t-button>
					<t-button class="ml-4" theme="default" @click="nextBtn">></t-button>
					<div class="w-24 ml-4">
						<t-select :options="yearOptions" v-model="yearValue" :onChange="selectChange" :disabled="yearMonthChecked"></t-select>
					</div>
					<div class="w-20 ml-4">
						<t-select :options="monthOptions" v-model="monthValue" :onChange="selectChange" :disabled="yearMonthChecked"></t-select>
					</div>
					<!-- 周选择器 -->
					<!-- <div class="w-40 ml-4 flex items-center">
						<t-date-picker class="w-full" mode="week" clearable allow-input v-model="weekSelectValue" :onChange="weekSelectChange" :disabled="!yearMonthChecked"/>
					</div> -->
					<t-radio-group v-model="yearMonthChecked" variant="default-filled" :onChange="switchChange" class="ml-4">
						<t-radio-button :value="false">月</t-radio-button>
						<t-radio-button :value="true">周</t-radio-button>
					</t-radio-group>
					<t-button class="ml-4" @click="goToDay">今天</t-button>
				</div>
			</div>
			<div class="mt-4 relative flex-grow" :style="calendarBodyHight">
				<!-- 今天 -->
				<div class="flex absolute left-0 top-0 z-0 h-full w-full">
					<div v-for="(item, index) in calendarBody" :key="index" class="h-full" :style="`width: ${(1 / calendarBody.length) * 100}%;`">
						<div v-if="toDayStr === item.dayStr" class="h-full w-full" style="background-color: rgba(74, 108, 231, 0.05);"></div>
					</div>
				</div>
				<div class="absolute left-0 top-0 z-10 w-full" ref="calendarBodyDom">
					<!-- 日历表头 -->
					<div class="flex">
						<!-- 周 -->
						<div 
						v-for="(item, index) in calendarHeader"
						:key="index"
						class="text-right flex-grow text-gray-400" 
						style="padding: 14px 1rem 6px 0;"
						v-if="yearMonthChecked"
						>{{item.label}}</div>
						<!-- 月 -->
						<div
						v-for="(item, index) in calendarHeader"
						:key="index"
						class="text-center text-gray-400"
						:style="`width: ${(1 / calendarHeader.length) * 100}%;`"
						v-if="!yearMonthChecked"
						>{{item.label}}</div>
					</div>
					<!-- 日历体没数据 -->
					<div class="flex" v-if="projectData.length === 0 && yearMonthChecked">
						<div
						v-for="(calendarBodyItem, index) in calendarBody" 
						:key="index" 
						:style="`width: ${(1 / calendarHeader.length) * 100}%;`"
						>
							<div class="pl-4 pr-4 pb-1 pt-1 h-40">
								<p class="text-right text-gray-400">{{calendarBodyItem.dayLabel}}</p>
							</div>
						</div>
					</div>
					<!-- 日历体有数据 -->
					<div 
					v-for="(item, project_id) in projectData" 
					:key="item.project_id"
					v-if="projectData.length != 0"
					>
						<div v-if="item.hidden">
							<!-- :style="`margin-left: ${ item.project_start_date.slice(0, 7) === yearMonth ? ((parseInt(item.project_start_date.slice(8, 10)) - 1) / calendarHeader.length) * 100 : '0' }%`" -->
							<div
							v-if="!yearMonthChecked"
							class="text-gray-400 pt-4 pb-2 truncate cursor-pointer hover:text-blue-500 font-bold"
							@click="goProjectInfo(item.project_id)"
							>
								<span :style="textColor[item.backgroundStyle]">
									<span class="projectTitleMonth" :style="`padding: 2px 6px 2px 6px; ${backgroundColorSpan[item.backgroundStyle]}`">
										{{item.project_name}}
									</span>
									<span class="text-gray-400 font-normal">
										&nbsp;&nbsp;&nbsp;&nbsp;项目进展：<span class="rounded text-white" :style="`padding: 2px 6px 2px 6px;${projectStageMonth(item.project_state)[1]}`">{{projectStageMonth(item.project_state)[0]}}</span>
										&nbsp;&nbsp;&nbsp;&nbsp;组员：
										 <span v-for="(itemgroup, index) in item.project_groups" :key="index">
											{{index == item.project_groups.length - 1 ? itemgroup.project_groups_name : itemgroup.project_groups_name +  '，'}}
										</span>
									</span>
								</span>
							</div>
							<div class="flex">
								<!-- 周日历 -->
								<div
								v-for="(calendarBodyItem, index) in calendarBody"
								:key="index" 
								:style="`width: ${(1 / calendarHeader.length) * 100}%;`"
								v-if="yearMonthChecked"
								>
									<div class="pl-4 pr-4 pb-4 pt-1" v-if="calendarIf(calendarBodyItem.dayStr, item.children)">
										<p class="text-right text-gray-400">{{calendarBodyItem.dayLabel}}</p>
									</div>
									<div 
									v-for="(projectChildrenItem, dayStr) in item.children" 
									:key="projectChildrenItem.dayStr" 
									:style="`${projectChildrenItem.dayStr === calendarBodyItem.dayStr ? backgroundColor[item.backgroundStyle] : ''}`">
										<div v-if="projectChildrenItem.dayStr === calendarBodyItem.dayStr" class="pl-4 pr-4 pb-4 pt-1 cursor-pointer hover:opacity-80" @click="goProjectInfo(item.project_id)">
											<p class="text-right text-gray-700">{{calendarBodyItem.dayLabel}}</p>
											<div class="flex items-center pt-1">
												<t-popup :content="item.project_name">
													<p class="truncate w-24 text-base">{{item.project_name}}</p>
												</t-popup>
												<div class="border-solid border-gray-400 border ml-2 text-gray-400" style="padding: 0 4px; border-radius: 4px;">{{item.project_type == 0 ? '公司' : '客户'}}</div>
											</div>
											<p class="pt-1" :style="projectStage(projectChildrenItem.state, 'style', item.project_state)"><span class="text-gray-400">阶段：</span>{{projectStage(projectChildrenItem.state, 'name', item.project_state)}}</p>
											<p class="pt-1">
												<span class="text-gray-400">组员：</span>
												<span v-for="(itemgroup, index) in item.project_groups" :key="index">{{itemgroup.project_groups_name + ' '}}</span>
											</p>
										</div>
									</div>
								</div>
								<!-- 月日历 -->
								<div
								v-for="(calendarBodyItem, index) in calendarBody"
								:key="index" 
								:style="`width: ${(1 / calendarHeader.length) * 100}%;`"
								v-if="!yearMonthChecked"
								>
									<div class="w-full h-10" v-if="calendarIf(calendarBodyItem.dayStr, item.children)" style="background-color: #f7f7f7;"></div>
									<div 
									v-for="(projectChildrenItem, dayStr) in item.children" 
									:key="projectChildrenItem.dayStr" 
									>
										<div 
										v-if="projectChildrenItem.dayStr === calendarBodyItem.dayStr" 
										:style="`${projectChildrenItem.dayStr === calendarBodyItem.dayStr ? backgroundColor[item.backgroundStyle] : ''}`"
										class="w-full h-10 flex items-center justify-center cursor-pointer"
										@click="goProjectInfo(item.project_id)"
										>
											<div :style="projectStage(projectChildrenItem.state, 'style', item.project_state)">
												{{projectStage(projectChildrenItem.state, 'name', item.project_state)}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getTimeTwo, getMonthDay, yearMonth } from '@/unit/myDate'
	import dayjs from 'dayjs'
	
	export default {
		name: 'Progress',
		data(){
			return {
				yearValue: dayjs().year(),
				monthValue: dayjs().month() + 1,
				yearMonthChecked: false,
				projectData: [],
				yearMonth: '',
				weekArr: [''],
				monthArr: [''],
				backgroundColor: [
					'background-color: rgba(74, 108, 231, 0.1); border-top: 1px rgba(74, 108, 231, 1) solid',
					'background-color: rgba(255, 141, 26, 0.1); border-top: 1px rgba(255, 141, 26, 1) solid',
					'background-color: rgba(0, 186, 173, 0.1); border-top: 1px rgba(0, 186, 173, 1) solid',
					'background-color: rgba(255, 235, 59, 0.1); border-top: 1px rgba(255, 235, 59, 1) solid',
					'background-color: rgba(121, 72, 234, 0.1); border-top: 1px rgba(121, 72, 234, 1) solid'
				],
				backgroundColorSpan: [
					'background-color: rgba(74, 108, 231, 0.1);',
					'background-color: rgba(255, 141, 26, 0.1);',
					'background-color: rgba(0, 186, 173, 0.1);',
					'background-color: rgba(255, 235, 59, 0.1);',
					'background-color: rgba(121, 72, 234, 0.1);'
				],
				textColor: [
					'color: rgba(74, 108, 231, 1)',
					'color: rgba(255, 141, 26, 1)',
					'color: rgba(0, 186, 173, 1)',
					'color: #E0CB0D',
					'color: rgba(121, 72, 234, 1)'
				],
				hiddenStartProjectValue: false,
				hiddenEndProjectValue: true,
				toDayStr: dayjs().format('YYYY-MM-DD'),
				calendarBodyHight: '',
				projectName: '',
				weekSelectValue: ''
			}
		},
		computed: {
			// 年选择框
			yearOptions(){
				let arr = []
				let index = dayjs().year()
				for(let i = 0 ; i < 5 ; i++){
					arr.push({
						label: index + '年',
						value: index
					})
					index--
				}
				return arr
			},
			// 月选择框
			monthOptions(){
				let arr = []
				let index = 0
				for(let i = 0 ; i < 12 ; i++){
					index++
					arr.push({
						label: index + '月',
						value: index
					})
				}
				return arr
			},
			// 日历头
			calendarHeader(){
				if(this.yearMonthChecked){
					// 周
					let arr = []
					let arrStr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					let index = 0
					for(let i = 0 ; i < arrStr.length ; i++){
						index = i
						arr.push({
							value: index + 1,
							label: arrStr[i]
						})
					}
					return arr
				} else {
					// 月
					let arr = []
					for(let i = 0 ; i < getMonthDay(this.yearMonth) ; i++){
						arr.push({
							value: i + 1,
							label: i + 1
						})
					}
					return arr
				}
			},
			// 日历体
			calendarBody(){
				if(this.yearMonthChecked){
					// 周
					let arr = this.calendarHeader
					for(let i = 0 ; i < arr.length ; i++){
						arr[i].dayStr = this.weekArr[i]
						arr[i].dayLabel = this.weekArr[i].slice(8, 10)
					}
					return arr
				} else {
					// 月
					let arr = this.calendarHeader
					for(let i = 0 ; i < arr.length ; i++){
						arr[i].dayStr = this.monthArr[i]
						arr[i].dayLabel = this.monthArr[i].slice(8, 10)
					}
					return arr
				}
			},
		},
		methods: {
			// 展示月份时，项目的当前状态
			projectStageMonth(project_state){
				if(project_state === 0){
					return ['进行中', 'background-color: rgba(74, 108, 231, 1)']
				} else if(project_state === 1){
					return ['修改中', 'background-color: rgba(255, 141, 26, 1)']
				} else if(project_state === 2){
					return ['已完结', 'background-color: rgba(0, 186, 173, 1)']
				} else if(project_state === 3){
					return ['已流单', 'background-color: rgba(255, 87, 51, 1)']
				}
			},
			// 跳转到项目详情
			goProjectInfo(id){
				this.$router.push({
					name: 'ProjectInfo',
					query: {
						project_id: id
					}
				})
			},
			// 周选择器改变时
			weekSelectChange(){
				let weekFirstDay = ''
				let weekLastDay = ''
				if(!parseInt(this.weekSelectValue.slice(6, 8))){
					weekFirstDay = dayjs().year(this.weekSelectValue.slice(0, 4)).week(this.weekSelectValue.slice(5, 6)).day(1).format("YYYY-MM-DD")
					weekLastDay = dayjs().year(this.weekSelectValue.slice(0, 4)).week(this.weekSelectValue.slice(5, 6)).day(7).format("YYYY-MM-DD")
				} else {
					weekFirstDay = dayjs().year(this.weekSelectValue.slice(0, 4)).week(this.weekSelectValue.slice(5, 7)).day(1).format("YYYY-MM-DD")
					weekLastDay = dayjs().year(this.weekSelectValue.slice(0, 4)).week(this.weekSelectValue.slice(5, 7)).day(7).format("YYYY-MM-DD")
				}
				this.weekArr = getTimeTwo(weekFirstDay, weekLastDay)
				this.yearValue = parseInt(this.weekArr[0].slice(0, 4))
				this.monthValue = parseInt(this.weekArr[0].slice(5, 7))
				// 解决计算属性无法监听 this.weekArr 变化的问题
				this.weekArr.push('')
				this.weekArr.splice(7, 1)
				// 发送请求
				let query = {
					start_date: this.weekArr[0],
					end_date: this.weekArr[this.weekArr.length - 1]
				}
				this.getProject(query)
			},
			// 根据项目名查询
			getProjectName(){
				if(!this.projectName){
					let startDay = null
					let today = new Date()
					for(let i = 0 ; i < this.projectData.length ; i++){
						// 是否隐藏项目
						this.projectData[i].hidden = true
						if(this.hiddenStartProjectValue){ 
							startDay = new Date(this.projectData[i].project_start_date)
							if( startDay.getTime() > today.getTime() ){
								this.projectData[i].hidden = false
							}
						}
						if(this.hiddenEndProjectValue){ 
							if( this.projectData[i].project_state > 1 ){
								this.projectData[i].hidden = false
							}
						}
					}
					// 解决v-if失效问题
					this.projectData.push({})
					this.projectData.splice(this.projectData.length - 1, 1)
				} else {
					this.hiddenStartProjectValue = false
					this.hiddenEndProjectValue = false
					for(let i = 0 ; i < this.projectData.length ; i++){
						if(this.projectData[i].project_name.indexOf(this.projectName) >= 0){
							this.projectData[i].hidden = true
						} else {
							this.projectData[i].hidden = false
						}
					}
					// 解决v-if失效问题
					this.projectData.push({})
					this.projectData.splice(this.projectData.length - 1, 1)
				}
			},
			// 隐藏已完结的项目
			hiddenEndProject(bool){
				this.projectName = ''
				if(bool){
					for(let i = 0 ; i < this.projectData.length ; i++){
						if( this.projectData[i].project_state > 1 ){
							this.projectData[i].hidden = false
						}
					}
				} else {
					for(let i = 0 ; i < this.projectData.length ; i++){
						this.projectData[i].hidden = true
					}
				}
				// 解决v-if失效问题
				this.projectData.push({})
				this.projectData.splice(this.projectData.length - 1, 1)
			},
			// 隐藏未开始的项目
			hiddenStartProject(bool){
				this.projectName = ''
				if(bool){
					let start_date = null
					let today = new Date()
					for(let i = 0 ; i < this.projectData.length ; i++){
						start_date = new Date(this.projectData[i].project_start_date)
						if( start_date.getTime() > today.getTime() ){
							this.projectData[i].hidden = false
						}
					}
				} else {
					for(let i = 0 ; i < this.projectData.length ; i++){
						this.projectData[i].hidden = true
					}
				}
				// 解决v-if失效问题
				this.projectData.push({})
				this.projectData.splice(this.projectData.length - 1, 1)
			},
			// 年, 月选择框变化
			selectChange(){
				if(this.monthValue < 10){
					this.yearMonth = this.yearValue + '-0' + this.monthValue
				} else {
					this.yearMonth = this.yearValue + '-' + this.monthValue
				}
				this.getWeekArr()
				this.getMonthArr()
				// 解决计算属性无法监听 this.weekArr 变化的问题
				this.weekArr.push('')
				this.weekArr.splice(7, 1)
				this.getMonthArr()
				let query = {
					start_date: this.monthArr[0],
					end_date: this.monthArr[getMonthDay(this.yearMonth) - 1]
				}
				this.getProject(query)
			},
			// 周月开关变化
			switchChange(val){
				this.yearMonth = dayjs().format('YYYY-MM-DD').slice(0, 7)
				this.monthValue = parseInt(this.yearMonth.slice(5, 7))
				this.yearValue = parseInt(this.yearMonth.slice(0, 4))
				this.getWeekArr()
				this.getMonthArr()
				// 解决计算属性无法监听 this.weekArr 变化的问题
				this.weekArr.push('')
				this.weekArr.splice(7, 1)
				if(val){
					let query = {
						start_date: this.weekArr[0],
						end_date: this.weekArr[this.weekArr.length - 1]
					}
					this.getProject(query)
				} else {
					this.getMonthArr()
					let query = {
						start_date: this.monthArr[0],
						end_date: this.monthArr[getMonthDay(this.yearMonth) - 1]
					}
					this.getProject(query)
				}
			},
			// 日历有数据的地方不展示默认日历
			calendarIf(item, arr){
				for(let i = 0 ; i < arr.length ; i++){
					if(item === arr[i].dayStr){
						return false
					}
				}
				return true
			},
			// 项目阶段显示
			projectStage(state, backType, projectState){
				if(this.yearMonthChecked){
					if(state === 0 && backType === 'style'){ return 'color: rgba(0, 186, 173, 1)' }
					if(state === 0 && backType === 'name'){ return '启动' }
					if(state === 1 && backType === 'style'){ return 'color: rgba(74, 108, 231, 0.3)' }
					if(state === 1 && backType === 'name'){ return '进行中...' }
					if(state === 2 && backType === 'style'){
						if(state === 2 && backType === 'style' && projectState >= 1){ return 'color: rgba(255, 141, 26, 1)' }
						return 'color: rgba(255, 141, 26, 0.3)' 
					}
					if(state === 2 && backType === 'name'){
						if(state === 2 && backType === 'name' && projectState >= 1){ return '已提交' }
						return '初稿提交' 
					}
					if(state === 3 && backType === 'style'){ return 'color: rgba(212, 48, 48, 0.5)' }
					if(state === 3 && backType === 'name'){ return '修改中...' }
					if(state === 4 && backType === 'style'){
						if(state === 4 && backType === 'style' && projectState === 2){ return 'color: rgba(0, 186, 173, 1)' }
						if(state === 4 && backType === 'style' && projectState === 3){ return 'color: rgba(212, 48, 48, 1)' }
						return 'color: rgba(0, 186, 173, 0.3)'
					}
					if(state === 4 && backType === 'name'){
						if(state === 4 && backType === 'name' && projectState === 2){ return '已完结' }
						if(state === 4 && backType === 'name' && projectState === 3){ return '流单' }
						return '计划完结'
					}
				} else {
					if(state === 0 && backType === 'style'){ return 'color: rgba(0, 186, 173, 1);' }
					if(state === 0 && backType === 'name'){ return '启' }
					if(state === 1 && backType === 'style'){ return 'color: rgba(74, 108, 231, 0.3);' }
					if(state === 1 && backType === 'name'){ return '进' }
					if(state === 2 && backType === 'style'){
						if(state === 2 && backType === 'style' && projectState >= 1){ return 'color: rgba(255, 141, 26, 1);' }
						return 'color: rgba(255, 141, 26, 0.3);' 
					}
					if(state === 2 && backType === 'name'){
						if(state === 2 && backType === 'name' && projectState >= 1){ return '初' }
						return '待' 
					}
					if(state === 3 && backType === 'style'){ return 'color: rgba(212, 48, 48, 0.5);'}
					if(state === 3 && backType === 'name'){ return '改' }
					if(state === 4 && backType === 'style'){
						if(state === 4 && backType === 'style' && projectState === 2){ return 'color: rgba(0, 186, 173, 1);'}
						if(state === 4 && backType === 'style' && projectState === 3){ return 'color: rgba(212, 48, 48, 1);'}
						return 'color: rgba(0, 186, 173, 0.3);'
					}
					if(state === 4 && backType === 'name'){
						if(state === 4 && backType === 'name' && projectState === 2){ return '完' }
						if(state === 4 && backType === 'name' && projectState === 3){ return '流' }
						return '结'
					}
				}
			},
			// 今天
			goToDay(){
				// this.weekSelectValue = dayjs().year() + '-' + (dayjs().week() - 1) + 'rd'
				this.yearMonth = dayjs().format('YYYY-MM-DD').slice(0, 7)
				this.monthValue = parseInt(this.yearMonth.slice(5, 7))
				this.yearValue = parseInt(this.yearMonth.slice(0, 4))
				this.getWeekArr()
				this.getMonthArr()
				// 解决计算属性无法监听 this.weekArr 变化的问题
				this.weekArr.push('')
				this.weekArr.splice(7, 1)
				if(this.yearMonthChecked){
					let query = {
						start_date: this.weekArr[0],
						end_date: this.weekArr[this.weekArr.length - 1]
					}
					this.getProject(query)
				} else {
					this.getMonthArr()
					let query = {
						start_date: this.monthArr[0],
						end_date: this.monthArr[getMonthDay(this.yearMonth) - 1]
					}
					this.getProject(query)
				}
			},
			// 下一个按钮
			nextBtn(){
				if(this.yearMonthChecked){
					// 周
					let myDay = 0
					let monthValue = 0
					let yearValue = 0
					let monthDay = 0
					for(let i = 0 ; i < this.weekArr.length ; i++){
						myDay = parseInt(this.weekArr[i].slice(8, 10))
						monthValue = parseInt(this.weekArr[i].slice(5, 7))
						yearValue = parseInt(this.weekArr[i].slice(0, 4))
						if(monthValue < 10){
							monthDay = getMonthDay(yearValue + '-0' + monthValue)
						} else {
							monthDay = getMonthDay(yearValue + '-' + monthValue)
						}
						if(myDay + 7 > monthDay){
							// 月份前进一位
							if(monthValue + 1 > 12){
								// 月份归为1
								this.weekArr[i] = (yearValue + 1) + '-01-0' + (myDay + 7 - monthDay)
							} else {
								// 月份++
								if(monthValue + 1 < 10){
									// 月份补0
									this.weekArr[i] = yearValue + '-0' + (monthValue + 1) + '-0' + ((myDay + 7) - monthDay)
								} else {
									// 月份不补0
									this.weekArr[i] = yearValue + '-' + (monthValue + 1) + '-0' + ((myDay + 7) - monthDay)
								}
							}
						} else {
							if(myDay + 7 < 10){
								if(monthValue < 10){
									this.weekArr[i] = yearValue + '-0' + monthValue + '-0' + (myDay + 7)
								} else {
									this.weekArr[i] = yearValue + '-' + monthValue + '-0' + (myDay + 7)
								}
							} else {
								if(monthValue < 10){
									this.weekArr[i] = yearValue + '-0' + monthValue + '-' + (myDay + 7)
								} else {
									this.weekArr[i] = yearValue + '-' + monthValue + '-' + (myDay + 7)
								}
							}
						}
					}
					this.weekSelectValue = ''
					this.yearValue = parseInt(this.weekArr[0].slice(0, 4))
					this.monthValue = parseInt(this.weekArr[0].slice(5, 7))
					// 解决计算属性无法监听 this.weekArr 变化的问题
					this.weekArr.push('')
					this.weekArr.splice(7, 1)
					// 发送请求
					let query = {
						start_date: this.weekArr[0],
						end_date: this.weekArr[this.weekArr.length - 1]
					}
					this.getProject(query)
				} else {
					// 月
					if(parseInt(this.yearMonth.slice(5, 7)) + 1 > 12){
						this.yearMonth = (parseInt(this.yearMonth.slice(0, 4)) + 1) + '-01'
					} else if(parseInt(this.yearMonth.slice(5, 7)) + 1 < 10){
						this.yearMonth = this.yearMonth.slice(0, 5) + ('0' + (parseInt(this.yearMonth.slice(5, 7)) + 1))
					} else {
						this.yearMonth = this.yearMonth.slice(0, 5) + (parseInt(this.yearMonth.slice(5, 7)) + 1)
					}
					this.getMonthArr()
					this.monthValue = parseInt(this.yearMonth.slice(5, 7))
					this.yearValue = parseInt(this.yearMonth.slice(0, 4))
					let query = {
						start_date: this.monthArr[0],
						end_date: this.monthArr[getMonthDay(this.yearMonth) - 1]
					}
					this.getProject(query)
				}
			},
			// 上一个按钮
			lastBtn(){
				if(this.yearMonthChecked){
					// 周
					let myDay = 0
					let monthValue = 0
					let yearValue = 0
					for(let i = 0 ; i < this.weekArr.length ; i++){
						myDay = parseInt(this.weekArr[i].slice(8, 10))
						monthValue = parseInt(this.weekArr[i].slice(5, 7))
						yearValue = parseInt(this.weekArr[i].slice(0, 4))
						if(myDay - 7 < 1){
							if(monthValue - 1 < 1){
								this.weekArr[i] = (yearValue - 1) + '-12-' + (31 + myDay - 7)
							} else {
								if(monthValue - 1 < 10){
									this.weekArr[i] = yearValue + '-0' + (monthValue - 1) + '-'  + ( getMonthDay(yearValue + '-0' + (monthValue - 1)) + myDay - 7)
								} else {
									this.weekArr[i] = yearValue + '-' + (monthValue - 1) + '-'  + ( getMonthDay(yearValue + '-' + (monthValue - 1)) + myDay - 7)
								}
							}
						} else {
							if(myDay - 7 < 10){
								if(monthValue < 10){
									this.weekArr[i] = yearValue + '-0' + monthValue + '-0' + (myDay - 7)
								} else {
									this.weekArr[i] = yearValue + '-' + monthValue + '-0' + (myDay - 7)
								}
							} else {
								if(monthValue < 10){
									this.weekArr[i] = yearValue + '-0' + monthValue + '-' + (myDay - 7)
								} else {
									this.weekArr[i] = yearValue + '-' + monthValue + '-' + (myDay - 7)
								}
							}
						}
					}
					this.weekSelectValue = ''
					this.yearValue = parseInt(this.weekArr[0].slice(0, 4))
					this.monthValue = parseInt(this.weekArr[0].slice(5, 7))
					// 解决计算属性无法监听 this.weekArr 变化的问题
					this.weekArr.push('')
					this.weekArr.splice(7, 1)
					let query = {
						start_date: this.weekArr[0],
						end_date: this.weekArr[this.weekArr.length - 1]
					}
					this.getProject(query)
				} else {
					// 月
					if(parseInt(this.yearMonth.slice(5, 7)) - 1 === 0){
						this.yearMonth = (parseInt(this.yearMonth.slice(0, 4)) - 1) + '-12'
					} else if(parseInt(this.yearMonth.slice(5, 7)) - 1 < 10){
						this.yearMonth = this.yearMonth.slice(0, 5) + ('0' + (parseInt(this.yearMonth.slice(5, 7)) - 1))
					} else {
						this.yearMonth = this.yearMonth.slice(0, 5) + (parseInt(this.yearMonth.slice(5, 7)) - 1)
					}
					this.getMonthArr()
					this.monthValue = parseInt(this.yearMonth.slice(5, 7))
					this.yearValue = parseInt(this.yearMonth.slice(0, 4))
					let query = {
						start_date: this.monthArr[0],
						end_date: this.monthArr[getMonthDay(this.yearMonth) - 1]
					}
					this.getProject(query)
				}
			},
			// 以月为单位生成初始一个日期数据
			getMonthArr(){
				for(let i = 1 ; i <= getMonthDay(this.yearMonth) ; i++){
					if(i < 10){
						this.monthArr[i - 1] = this.yearMonth + '-0' + i
					} else {
						this.monthArr[i - 1] = this.yearMonth + '-' + i
					}
				}
			},
			// 以周为单位生成初始一个日期数组
			getWeekArr(){
				const toDayStr = dayjs().format('YYYY-MM-DD')
				let toDayDay = dayjs().day()
				if(toDayDay === 0){ toDayDay = 7 }
				let str = ''
				for(let i = 1 ; i < 8; i++){
					if(i < toDayDay){
						if(parseInt(toDayStr.slice(8, 10)) - (toDayDay - i) < 10){
							str = this.yearMonth + '-0' + (parseInt(toDayStr.slice(8, 10)) - (toDayDay - i))
							this.weekArr[i-1] = str
						} else {
							str = this.yearMonth + '-' + (parseInt(toDayStr.slice(8, 10)) - (toDayDay - i))
							this.weekArr[i-1] = str
						}
					} else if(i === toDayDay){
						str = toDayStr
						this.weekArr[i-1] = str
					} else {
						if(parseInt(toDayStr.slice(8, 10)) + (i - toDayDay) < 10){
							str = this.yearMonth + '-0' + (parseInt(toDayStr.slice(8, 10)) + (i - toDayDay))
							this.weekArr[i-1] = str
						} else {
							str = this.yearMonth + '-' + (parseInt(toDayStr.slice(8, 10)) + (i - toDayDay))
							this.weekArr[i-1] = str
						}
					}
				}
			},
			// 日历获取项目数据
			getProject(query){
				this.$store.dispatch('project/getProject', query).then(res => {
					if(res.status == 0){
						this.projectData = res.data
						let everyDay, startDay, firstDay, endDay = null
						let arr = []
						let index = 0
						let today = new Date()
						for(let i = 0 ; i < this.projectData.length ; i++){
							// 是否隐藏项目
							this.projectData[i].hidden = true
							if(this.hiddenStartProjectValue){ 
								startDay = new Date(this.projectData[i].project_start_date)
								if( startDay.getTime() > today.getTime() ){
									this.projectData[i].hidden = false
								}
							}
							if(this.hiddenEndProjectValue){ 
								if( this.projectData[i].project_state > 1 ){
									this.projectData[i].hidden = false
								}
							}
							// 设置项目背景色下标
							this.projectData[i].backgroundStyle = index
							index++
							if(index === 5){ index = 0 }
							// 添加项目对应日历
							arr = getTimeTwo(this.projectData[i].project_start_date, this.projectData[i].project_end_date)
							this.projectData[i].children = []
							for(let j = 0 ; j < arr.length ; j++){
								this.projectData[i].children.push({ dayStr: arr[j] })
								everyDay = new Date(arr[j])
								startDay = new Date(this.projectData[i].project_start_date)
								firstDay = new Date(this.projectData[i].project_first_date)
								endDay = new Date(this.projectData[i].project_end_date)
								if(everyDay.getTime() == startDay.getTime()){
									this.projectData[i].children[j].state = 0 // 项目启动状态
								} else if( firstDay.getTime() > everyDay.getTime() && everyDay.getTime() > startDay.getTime()){
									this.projectData[i].children[j].state = 1 // 项目运行阶段
								} else if( everyDay.getTime() == firstDay.getTime() ){
									this.projectData[i].children[j].state = 2 // 项目提交初稿状态
								} else if( endDay.getTime() > everyDay.getTime() && everyDay.getTime() > firstDay.getTime() ){
									this.projectData[i].children[j].state = 3 // 项目修改阶段
								} else if( everyDay.getTime() == endDay.getTime() ){
									this.projectData[i].children[j].state = 4 // 项目结束阶段
								}
							}
							this.getProjectName()
						}
					}
				})
			}
		},
		created(){
			this.yearMonth = dayjs().format('YYYY-MM-DD').slice(0, 7)
			this.getWeekArr()
			this.getMonthArr()
			const query = {
				start_date: this.monthArr[0],
				end_date: this.monthArr[this.monthArr.length - 1]
			}
			this.getProject(query)
		},
		updated(){
			this.calendarBodyHight = `height: ${this.$refs.calendarBodyDom.offsetHeight}px`
		}
	}
</script>

<style>
	.projectTitleMonth{
		border-radius: 0.25rem;
		transition: all .5s;
	}
	.projectTitleMonth:hover{
		transform: translate(0, -10px);
		box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.05);
	}
</style>